<template>
  <div class="chen-infomationAlert" v-show="isShow" :style="'top:' + top + ';left: ' + left" ref="drag">
    <div class="bgTop">
      <span>{{ title }}</span>
      <span class="close" @click="closeBox">×</span>
    </div>
    <div class="bgCenter" v-if="isSolt">
      <slot></slot>
    </div>
    <div class="bgCenter" v-else v-html="content || '<b>暂无信息</b>'"></div>
    <div class="bgBottom"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch, ref } from 'vue';
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      required: true
    },
    isSolt: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    top: {
      type: String,
      default: '0px'
    },
    left: {
      type: String,
      default: '0px'
    }
  },
  setup (props, { emit }) {
    const drag = ref();
    const data = reactive({
      isShow: false,
    });

    onMounted(() => {
      data.isShow = props.show;
      dragFunction(drag.value);
    });

    watch(() => props.show, () => {
      data.isShow = props.show;
    });

    const closeBox = () => {
      data.isShow = false;
      emit('closeBox');
    };

    const dragFunction = (el: HTMLElement) => {
      el.style.position = "absolute";
      let offsetX: number = 0;
      let offsetY: number = 0;
      el.addEventListener("mousedown", function (event: any) {
        if (event.button == 0 && el) {
          const lexObj: any = getComputedStyle(el);
          offsetX = event.pageX - el.offsetLeft + parseInt(lexObj["margin-left"]);
          offsetY = event.pageY - el.offsetTop + parseInt(lexObj["margin-right"]);
          const move = function (event: any) {
            if (el) {
              let x = event.pageX - offsetX;
              let y = event.pageY - offsetY;
              if (x < 0) {
                x = 0;
              } else if (
                x >
                document.documentElement.clientWidth - el.offsetWidth
              ) {
                x = document.documentElement.clientWidth - el.offsetWidth;
              }
              if (y < 0) {
                y = 0;
              } else if (
                y >
                document.documentElement.clientHeight - el.offsetHeight
              ) {
                y = document.documentElement.clientHeight - el.offsetHeight;
              }
              el.style.left = x + "px";
              el.style.top = y + "px";
            }
            return false;
          };
          document.addEventListener("mousemove", move);
          const stop = function () {
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", stop);
          };
          document.addEventListener("mouseup", stop);
        }
        return false;
      });
    };

    return {
      ...toRefs(data),
      closeBox,
      drag
    };
  }
})

</script>

<style scoped lang="less">
.chen-infomationAlert {
  position: absolute;
  width: 240px;
  color: #FFF;
  pointer-events: none;
  z-index: 999;

  .bgTop {
    background: url("../assets/img/popTop.png") no-repeat center;
    background-size: 100% 100%;
    height: 48px;
    padding: 6px 9px;
    position: relative;
    cursor: move;
    pointer-events: auto;

    span {
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 0 10px rgb(0, 198, 224), 0 0 10px rgb(0, 155, 198),
        0 0 30px rgb(14, 139, 174), 0 0 40px rgb(0, 129, 164);
    }

    .close {
      position: absolute;
      top: 0;
      right: 1%;
      color: #fff;
      font-size: 20px;
      padding: 5px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      transform-origin: center 54%;
      text-shadow: none;

      &:hover {
        transform: rotate(90deg) scale(1.2);
      }
    }
  }

  .bgCenter {
    background: url("../assets/img/popCenter.png") no-repeat center;
    background-size: 100% 100%;
    padding: 0 16px;

    //pointer-events: auto;
    :deep(b) {
      display: flex;
      justify-content: center;
      padding-top: 16px;
      color: #8f8f8f;
    }

    :deep(p) {
      font-size: 15px;
      width: 100%;
      padding-top: 4px;
      font-size: 14px;

      span {
        display: inline-block;
        white-space: pre-wrap;
        font-size: 12px;
        text-indent: 28px;
        color: #8f8f8f;
      }
    }
  }

  .bgBottom {
    background: url("../assets/img/popBottom.png") no-repeat center;
    background-size: 100% 100%;
    height: 24px;
  }
}
</style>
